<template>
<div :class="className">
  <div class="carModelBaseInfo">
    <h4 class="withVerticleLineT4 title14">{{ $t('vehicleInfo') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :tip="tip" :loading="loadingVehicleDetail"></full-parent-dom-with-dask>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('VIN') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vin || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ openType==='formal'? $t('vehicleVersion') : $t('smartDrivingDomainVersion') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.vehicleVersion || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('vehicleType') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$t(vehicleTypeObj[vehicleDetail.vehicleType])"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('品牌') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="$store.getters.getDictCodeObj('companyDictCode')[vehicleDetail.company] || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('brandName') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.brandName || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('modelName') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.modelName || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('modelCode') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.modelCode || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 生产车系名称 -->
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('生产车系名称') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.productionSeries || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 生产车型名称 -->
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('生产车型名称') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.productionModel || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 公告车型 -->
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('公告车型') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.publishCode || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 年款 -->
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('年款') }}</a-col>
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.modelStyleVo && vehicleDetail.modelStyleVo.makeYear || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 款型名称 -->
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('stereotype') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.modelStyleName || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>子车型代码</span></a-col
        >
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.modelStyleVo && vehicleDetail.modelStyleVo.code || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('productionPlant') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        >
          <table-ellipsis :text="$store.getters.getDictCodeObj('manufacturerDictCode')[vehicleDetail.manufacturer] ||
            vehicleDetail.manufacturer || '-'"/>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('生产批次') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.produceBatch || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('productionYear') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateStr(vehicleDetail.productionTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('车辆阶段') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="$store.getters.getDictCodeObj('producePhaseDictCode')[vehicleDetail.producePhase] || vehicleDetail.producePhase || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('province') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="$t(vehicleDetail.province) || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机平台') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframePlatform || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机零件号') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframePartCode || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机SN') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframeSn || '-'"></table-ellipsis>
        </a-col>
      </a-row> -->
      <!-- ECC证书 -->
      <!-- <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('ecczs') }}</span></a-col
        >
        <a-col :md="14" :sm="10" class="result">
          <span>{{vehicleDetail.hasEccCertificate === true ? $t('已灌装') : vehicleDetail.hasEccCertificate === false ? $t('未灌装') : '-'}}</span> -->
<!--          <a @click="showValue('eccCertificate')">{{ // vehicleDetail.eccCertificate ? $t('view') : '-' }}</a>-->
        <!-- </a-col>
      </a-row> -->
      <!-- RSA证书SN号 -->
      <!-- <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('rsasn') }}</span></a-col
        >
        <a-col :md="14" :sm="10" class="result">
          <span>{{vehicleDetail.hasRsaSn === true ? $t('已灌装') : vehicleDetail.hasRsaSn === false ? $t('未灌装') : '-'}}</span>
        </a-col>
      </a-row> -->
        <!-- 车身颜色 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">车身颜色</a-col>
          <a-col
            :md="14"
            :sm="10"
            class="result"
          ><table-ellipsis :text="vehicleDetail.color || '-'"></table-ellipsis
          ></a-col>
        </a-row>
        <!-- 内饰颜色 -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">内饰颜色</a-col>
          <a-col
            :md="14"
            :sm="10"
            class="result"
          ><table-ellipsis :text="vehicleDetail.interiorColor || '-'"></table-ellipsis
          ></a-col>
        </a-row>
        <!-- 座位数 数据里没有返回-->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">座位数</a-col>
          <a-col
            :md="14"
            :sm="10"
            class="result"
          ><table-ellipsis :text="vehicleDetail.seats || '-'"></table-ellipsis
          ></a-col>
        </a-row>
        <!-- 库位 数据里没有返回-->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">库位</a-col>
          <a-col
            :md="14"
            :sm="10"
            class="result"
          >
            <table-ellipsis :text="$store.getters.getDictCodeObj('binlocationDictCode')[vehicleDetail.location] || '-'">
            </table-ellipsis>
          </a-col>
        </a-row>
        <!-- 入库时间 -->
        <a-row class="baseInfoItem">
          <a-col
            :md="10"
            :sm="14"
          ><span>入库时间</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateMinuteStr(vehicleDetail.insertTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
        <!-- 上线时间 -->
        <a-row class="baseInfoItem">
          <a-col
            :md="10"
            :sm="14"
          ><span>上线时间</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateMinuteStr(vehicleDetail.onLineTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
        <!-- 下线时间 -->
        <a-row class="baseInfoItem">
          <a-col
            :md="10"
            :sm="14"
          ><span>下线时间</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateMinuteStr(vehicleDetail.offLineTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('timeOfCreation') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(vehicleDetail.createTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('lastOnlineTime') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(vehicleDetail.lastActiveTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('recentOTAStatus') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        >
       
        <a  @click="handleTaskRedict(vehicleDetail.taskType,vehicleDetail.lastTaskName)" >{{vehicleDetail.lastTaskName || '-'}}</a>
        <span v-if="!!vehicleDetail.lastTaskStatus">
        -{{taskVehicleStatusDictCodeObj[vehicleDetail.lastTaskStatus]}}
        </span>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('vehicleRegistrationTime') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(vehicleDetail.registerTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- iccid -->
        <a-row class="baseInfoItem">
          <a-col :md="10" :sm="14">ICCID</a-col>
          <a-col
            :md="14"
            :sm="10"
            class="result"
          ><table-ellipsis :text="vehicleDetail.iccId || '-'"></table-ellipsis
          ></a-col>
        </a-row>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('creator') }}</span></a-col
        >
        <a-col
          :md="14"
          :sm="10"
          class="result"
        ><table-ellipsis :text="vehicleDetail.createBy || '-'"></table-ellipsis
        ></a-col>
      </a-row>
    </div>
  </div>
  <!-- DiLink信息 -->
  <div class="carModelBaseInfo">
    <h4 class="withVerticleLineT4 title14">{{ $t('DiLink信息') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :tip="tip" :loading="loadingVehicleDetail"></full-parent-dom-with-dask>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机平台') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframePlatform || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机零件号') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframePartCode || '-'"></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">
          <span>{{ $t('主机SN') }}</span>
        </a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis :text="vehicleDetail.mainframeSn || '-'"></table-ellipsis>
        </a-col>
      </a-row>
    </div>
  </div>
  <!-- 证书信息 -->
  <div class="carModelBaseInfo" style="border-bottom: 0">
    <h4 class="withVerticleLineT4 title14">{{ $t('证书信息') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :tip="tip" :loading="loadingVehicleDetail"></full-parent-dom-with-dask>
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('ecczs') }}</span></a-col
        >
        <a-col :md="14" :sm="10" class="result">
          <span>{{vehicleDetail.hasEccCertificate === true ? $t('已灌装') : $t('未灌装') }}</span>
<!--          <a @click="showValue('eccCertificate')">{{ // vehicleDetail.eccCertificate ? $t('view') : '-' }}</a>-->
        </a-col>
      </a-row>
      <!-- RSA证书SN号 -->
      <a-row class="baseInfoItem">
        <a-col
          :md="10"
          :sm="14"
        ><span>{{ $t('rsasn') }}</span></a-col
        >
        <a-col :md="14" :sm="10" class="result">
          <span>{{ vehicleDetail.hasRsaSn === true ? $t('已灌装') : $t('未灌装') }}</span>
        </a-col>
      </a-row>
    </div>
  </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import CustomModal from '@/components/CustomModal/index.vue'
export default {
  components: {
    FullParentDomWithDask,
    CustomModal,
    TableEllipsis
  },
  props:{
    'className' : {
      type: [Object],
      default: function(){
        return {}
      }
    },
    vin: {
      type: String,
      default: ''
    },
    // 用来判断时从测试车辆打开还是从正式车辆打开
    openType: {
      type: String,
      default: 'formal'
    }
  },
  computed: {
    ...mapState({
      vehicleDetail: (state) => state.vehicle.vehicleDetail,
      loadingVehicleDetail: (state) => state.vehicle.loadingVehicleDetail
    }),
    vehicleDataTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('vehicleDataTypeDictCode')
    },
    taskVehicleStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskVehicleStatusDictCode')
    }
  },
  created () {
    this.getPageDictData()
    this.getVehicleTypes()
    this.getVehicleDataTypes()
    this.$store.dispatch('getProducePhaseDictCodeData');
    this.$store.dispatch('getManufacturerDictCodeData');
    this.$store.dispatch('getBinlocationDictCodeData');
    this.$store.dispatch('getCompanyDictCodeData');
  },
  mounted(){
  },
  data () {
    const tip = this.$t('operatingTip').replace('__CONTENT__', this.$t('load') + this.$t('vehicleDetail'))
    return {
      vehicleTypeObj: {},
      tip,
      visible: false,
      modalConfig: {
        eccCertificate: {
          title: this.$t('ecczs')
        },
        rsaSn: {
          title: this.$t('rsasn')
        }
      },
      activeModalKey: ''
    }
  },
  methods: {
    handleTaskRedict(type,name){
      if(type==8||type==9){
        this.$router.push({ path: '/develop-test/task',query: { name: name, taskJump: 1 }  })
      }else{
        this.$router.push({ path: '/task/formal',query: { name: name, taskJump: 1 }  })
        }
    },
    getVehicleTypes () {
      const obj = {}
      this.$store.state.vehicle.types.forEach((item) => {
        obj[item.id] = item.name
      })
      this.vehicleTypeObj = obj
    },
    // 车辆升级状态
    getPageDictData () {
      ;['getTaskVehicleStatusDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    },
    // 车辆数据来源
    getVehicleDataTypes () {
      this.$store.state.dict.vehicleDataTypeDictCode.length === 0 &&
        this.$store.dispatch('getVehicleDataTypeDictCodeData')
    },
  }
}
</script>
<style lang="less" scoped>
  .vehicle-detail-standalone{
    padding: 24px 37px 0;
    background-color: rgb(249, 249, 249);
    height: 100%;
    overflow: auto;
  }

.carModelBaseInfo {
  margin-bottom: 20px;
  border-bottom: 1px solid @borderColor;
  padding-bottom: 15px;

  .baseInfoItems {
    position: relative;
  }

  .baseInfoItem {
    margin-top: 15px;

    .result {
      text-align: right;
    }
  }
}

.certificateCont {
  border: 1px solid @borderColor;
  border-radius: 2px;
  padding: 10px;
  height: 100%;
  overflow: auto;
  line-height: 2em;
}
</style>
<style lang="less">
.showCertificateStrategyModal {
  .ant-modal-header {
    border-bottom: none;
  }
  .ant-modal-body {
    padding: 0 24px;
  }
  .ant-modal-footer {
    border-top: none;
  }
}
</style>
